<template>
  <div class="yblist">
    <div class="yb_header">
      <a-tabs style="text-align: left;" defaultActiveKey="1" @change="callback">
        <!-- 分类名称-------------------------- -->

        <a-tab-pane tab="分类名称" key="1">
          <div class="musz">
            <div class="yyinput cn">
              <span>中文：</span>

              <a-auto-complete
                v-model="$store.state.inputCn"
                :dataSource="dataSourceCn"
                style="width: 30%"
                placeholder="请输入中文名称"
                :filterOption="filterOption"
                :disabled="$store.state.showCn==0?true:false"
                @change="inputvalu"
              />
            </div>
            <div class="yyinput en">
              <span>英文：</span>

              <a-auto-complete
                v-model="$store.state.inputEn"
                :dataSource="dataSourceEn"
                style="width: 30%"
                placeholder="请输入英文名称"
                :filterOption="filterOption"
                :disabled="$store.state.showEn==0?true:false"
                @change="inputvaluEn"
              />
            </div>
            <div class="yyinput ru">
              <span class="yyspan">德语：</span>
              <a-input
                style="width: 30%"
                :disabled="$store.state.showDw==0?true:false"
                v-model="$store.state.inputDw"
                placeholder="请输入德语名称"
              />
            </div>
            <div class="yyinput ja">
              <span class="yyspan">日文：</span>
              <a-input
                style="width: 30%"
                :disabled="$store.state.showJa==0?true:false"
                v-model="$store.state.inputJa"
                placeholder="请输入日文名称"
              />
            </div>

            <div class="yyinput dw">
              <span class="yyspan">俄文：</span>
              <a-input
                style="width: 30%"
                :disabled="$store.state.showRu==0?true:false"
                v-model="$store.state.inputRu"
                placeholder="请输入俄文名称"
              />
            </div>
            <div class="mu_btn">
              <a-button type="primary" @click="mlbc">保存</a-button>
              <a-button
                class="ant-btn ant-btn-danger ant-btn-background-ghost"
                type="primary"
                icon="poweroff"
                :loading="iconLoading"
                @click="GetSqliteData"
              >更新样本</a-button>
              <!-- <a-button
                type="primary"
                @click="rushcacho"
              >清缓存</a-button>-->
            </div>
          </div>
        </a-tab-pane>
        <!-- 分类名称--------------------------  -->
        <!-- 产品介绍 开始 -->

        <a-tab-pane tab="产品介绍" key="2">
          <div class="addbut">
            <a-button type="primary" @click="addcpzj">增加</a-button>
          </div>
          <a-table
            :pagination="false"
            style="margin-top:5px;"
            :columns="cpcolumns"
            :dataSource="$store.state.cpjslist"
            bordered
          >
            <span class="button">
              <a href="javascript:;" @click="()=>cptitlebc(record.key)">保存</a>
              <span class="fg">|</span>
              <a-popconfirm title="确定删除吗?" class="del" @confirm="() => onDelete(record.key)">
                <a href="javascript:;">删除</a>
              </a-popconfirm>
            </span>

            <template slot="operation" slot-scope="text, record">
              <div class="editable-row-operations">
                <span class="ml-button">
                  <a @click="() => editcpxg(record)">修改</a>
                  <span class="fg">|</span>
                  <span class="button">
                    <a-popconfirm
                      title="确定删除吗?"
                      class="del"
                      @confirm="() =>onDeleCpjs(record,record.key)"
                    >
                      <a href="javascript:;">删除</a>
                    </a-popconfirm>
                  </span>
                </span>
              </div>
            </template>
          </a-table>
          <!-- 产品介绍修改-------------------------- -->

          <transition>
            <a-drawer
            :destroyOnClose='true'
              :title="subbtn==1?'产品介绍 【修改】':'产品介绍 【新增】'"
              :width="820"
              @close="onClose"
              :visible="visible"
              :wrapStyle="{height: 'calc(100% - 108px)',overflow: 'auto',paddingBottom: '108px'}"
            >
              <div class="cpxiugai" style="line-height: 47px!important;">
                <div class="yy">
                  <span>语言：</span>
                  <a-radio-group
                    :defaultValue="cpyy"
                    v-model="cpyy"
                    buttonStyle="solid"
                    @change="e =>Changecpyy(e.target.value)"
                  >
                    <a-radio-button v-if="subbtn==1" disabled value="中文">中文</a-radio-button>
                    <a-radio-button v-if="subbtn==1" disabled value="英文">英文</a-radio-button>
                    <a-radio-button v-if="subbtn==1" disabled value="德语">德语</a-radio-button>
                    <a-radio-button v-if="subbtn==1" disabled value="日文">日文</a-radio-button>
                    <a-radio-button v-if="subbtn==1" disabled value="俄文">俄文</a-radio-button>

                    <a-radio-button v-if="subbtn==2" value="中文">中文</a-radio-button>
                    <a-radio-button v-if="subbtn==2" value="英文">英文</a-radio-button>
                    <a-radio-button v-if="subbtn==2" value="德语">德语</a-radio-button>
                    <a-radio-button v-if="subbtn==2" value="日文">日文</a-radio-button>
                    <a-radio-button v-if="subbtn==2" value="俄文">俄文</a-radio-button>
                  </a-radio-group>
                </div>
                <div class="xgbt">
                  <span>标题：</span>

                  <a-auto-complete
                    :dataSource="$store.state.flnamedata"
                    style="width:200px"
                    placeholder="请输入标题名称"
                    :filterOption="filterOption"
                    v-model="titleinput"
                    @change="onchangevalue"
                  />
                </div>
                <div class="cpnr">
                  <span>内容：</span>

                  <!-- 富文本编辑器 -->
                  <div class="edit_container">
                    <!-- <quill-editor
                      v-model="content"
                      ref="myQuillEditor"
                      :options="editorOption"
                      @blur="onEditorBlur($event)"
                      @focus="onEditorFocus($event)"
                      @change="onEditorChange($event)"
                    ></quill-editor> -->
                  <Editor ref="froalaEditor" @open="init" @on-change="changeContent"></Editor>

                  </div>
                </div>
              </div>

              <div
                :style="{
          position: 'absolute',
          left: 0,
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '10px 16px',
          background: '#fff',
          textAlign: 'right',
        }"
              >
                <a-button :style="{marginRight: '8px'}" @click="onClose">取消</a-button>
                <a-button v-if="subbtn==1" @click="subcpxg" type="primary">提交</a-button>
                <a-button v-if="subbtn==2" @click="addcpjs" type="primary">提交</a-button>
              </div>
            </a-drawer>
          </transition>
          <!-- 产品介绍修改-------------------------- -->
        </a-tab-pane>
        <!-- 产品介绍 结束-------------------------- -->

        <!-- 产品图 开始-->

        <a-tab-pane tab="产品图" key="3">
          <!-- 产品图--新增 开始-->
          <div class="addcpt">
            <div class="cpimgfoot">
              <!-- 开始 类型 -->
              <span>图片类型：</span>

              <div class="cpimglx" style="text-align:left;">
                <a-select :defaultValue="ssfl" style="width: 175px" @change="lxChange">
                  <a-select-option value="0">图例</a-select-option>
                  <a-select-option value="1">实物图</a-select-option>
                  <a-select-option value="10">广告图</a-select-option>
                  <a-select-option value="2">列表展示图</a-select-option>
                  <a-select-option value="3">3D 实物图</a-select-option>
                  <a-select-option value="4">3D CAD图</a-select-option>
                  <a-select-option value="5">3D PC展示(.flv或.swf)</a-select-option>
                  <a-select-option value="6">3D CAD下载</a-select-option>
                  <a-select-option value="7">33D SLDPRT下载</a-select-option>
                  <a-select-option value="8">3D 手机展示(.mp4)</a-select-option>
                  <a-select-option value="9">PDF 下载</a-select-option>
                </a-select>
              </div>
              <!-- 结束 类型 -->
              <!-- 开始 上传产品图 -->
              <div class="uploadimg" style="width: 160px">
                <a-upload
                  action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                  listType="picture-card"
                  :fileList="fileList"
                  accept=".jpg, .png"
                  @preview="handlePreview"
                  @change="Changecpimg"
                >
                  <div class="ico" v-if="fileList.length < 1">
                    <div class="uptext ant-upload-text">
                      <a-icon :type="loading ? 'loading' : 'cloud-upload'" />图片上传
                    </div>
                  </div>
                </a-upload>
                <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
                  <img class="avatar" alt="example" style="width: 100%" :src="previewImage" />
                </a-modal>
              </div>
              <!-- 结束 上传产品图 -->

              <!-- 开始 图片说明 -->
              <span>产品名称：</span>

              <div class="cpimgtit">
                <!-- <span>图片说明：</span> -->
                <a-input placeholder="请填写图片说明" class="el-input" v-model="cpimgtit"></a-input>
              </div>
              <!-- 结束 图片说明 -->

              <!-- 产品图--新增 -->
              <!-- 操作 -->
              <div class="cpimgcz">
                <a-button type="primary" @click="addpic">新增</a-button>
                <a-button>取消</a-button>
              </div>
            </div>
          </div>

          <a-table
            :pagination="false"
            :columns="cpcolumnsimg"
            :dataSource="$store.state.cpimglist"
            bordered
            :scroll="{ x:1500}"
          >
            <template v-for="cols in ['picPath']" :slot="cols" slot-scope="text, record, index">
              <div class="picPath">
                <span>
                  <a
                    :href="'https://image.bearing.cn/ebook/'+$store.state.filename+'/'+record.picPath"
                    target="_blank"
                    v-if="record.type<=4||record.type==10"
                  >
                    <img
                      class="cpimg"
                      @click="()=>cptitlebc(record.key)"
                      :src="'https://image.bearing.cn/ebook/'+$store.state.filename+'/'+record.picPath"
                      alt
                    />
                  </a>
                  <a-input
                    v-else
                    :value="record.picPath"
                    :v-model="record.picPath"
                    @change="e => handleChange(e.target.value, record.key, cols)"
                  />
                  <label v-if="record.type==5 || record.type==8">注：对接点播云 视频fileID</label>
                </span>
                <a-icon
                @click="editshowModal(record)"
                  style="font-size:20px; color:#40a9ff; cursor: pointer;"
                  :type="loading ? 'loading' : 'cloud-upload'"
                />
              </div>
            </template>

            <template slot="typeName" slot-scope="text, record">
              <div>
                <span v-if="record">{{text}} ({{record.type}})</span>
              </div>
            </template>
            <template
              v-for="col in ['px']"
              slot="px" slot-scope="text, record">
              <div :key="col" :title="text">
                <!-- <span v-if="record">{{text}} ({{record.type}})</span> -->
                <a-input
                  v-if="col=='px'"
                  type="number"
                  :min='0'
                  style="width:100px"
                  :value="record.px"
                  :v-model="record.px"
                  @change="e => handleChange(e.target.value, record.key, col,record)"
                />
              </div>
            </template>
            <template
              v-for="col in ['Name','dwName','enName','jaName','ruName']"
              :slot="col"
              slot-scope="text, record, index"
            >
              <div :key="col" :title="text" class="fhtitle">
                <a-input
                  v-if="col=='Name'||col=='dwName'||col=='enName'||col=='jaName'||col=='ruName'"
                  :disabled="col=='Name'&&$store.state.showCn==0||col=='enName'&&$store.state.showEn==0||col=='ruName'&&$store.state.showRu==0||col=='jaName'&&$store.state.showJa==0||col=='dwName'&&$store.state.showDw==0"
                  style="width:100px"
                  :value="text"
                  :v-model="text"
                  @change="e => handleChange(e.target.value, record.key, col)"
                />

                <template v-else>{{text}}</template>
              </div>
            </template>
            <template slot="operation" slot-scope="text, record">
              <div class="editable-row-operations">
                <span class="ml-button">
                  <span class="button">
                    <a href="javascript:;" @click="()=>cptitlebc(record.key)">保存</a>
                    <span class="fg">|</span>
                    <a-popconfirm title="确定删除吗?" class="del" @confirm="() => onDelete(record.key)">
                      <a href="javascript:;">删除</a>
                    </a-popconfirm>
                  </span>
                </span>
              </div>
            </template>
          </a-table>
         <p style="color:red;"> 注：排序按照升序排列方式</p>
          <a-modal v-model="cpmod_visible" title="修改产品图" @ok="edithandleOk" @cancel="afterClose">
            <!-- 开始 上传产品图 -->
            <div class="tab_upld">
              <a-upload
                action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                listType="picture-card"
                :fileList="tab_fileList"
                accept=".jpg, .png"
                @preview="handlePreview"
                @change="tabChangecpimg"
              >
                <div class="ico" v-if="tab_fileList.length < 1">
                  <div class="uptext ant-upload-text">
                    <a-icon :type="loading ? 'loading' : 'cloud-upload'" />
                  </div>
                </div>
              </a-upload>
              <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
                <img class="avatar" alt="example" style="width: 100%" :src="previewImage" />
              </a-modal>
            </div>
            <!-- 结束 上传产品图 -->
          </a-modal>
        </a-tab-pane>
        <!-- 产品图 结束-->

        <!-- 数据导入 开始 -->
        <a-tab-pane tab="产品参数" key="4" v-if="$store.state.ids!=0">
          <div class="sjdr">
            <span class="bt_tit">请选择：</span>
            <div class="bt_radio">
              <a-radio-group defaultValue @change="radiobt" buttonStyle="solid">
                <a-radio value="2">双列表头</a-radio>
                <a-radio value="1">单列表头</a-radio>
              </a-radio-group>
            </div>

            <div class="uploadiexel" style="width: 160px">
              <a-upload
                action="https://vip.bearing.cn"
                listType="picture-card"
                :fileList="fileList"
                @preview="handlePreview"
                @change="Changecpimg"
                accept=".xls, .xlsx"
               
              >
                <div class="ico" v-if="fileList.length < 1">
                  <div class="uptext ant-upload-text">
                    <a-icon :type="loading ? 'loading' : 'cloud-upload'" />文件上传
                  </div>
                </div>
              </a-upload>
              <span>{{previewImage}}</span>
            </div>
            <a-button class="dr" @click="scsjexl">
              导入数据
              <span class="jzflg" v-if="jzflg">
                <a-spin />
              </span>
            </a-button>
          </div>

          <div class="execl">
            <a-button type="primary" @click="exportToExcel">excel导出</a-button>

            <a-table
              class="exelbody"
              :columns="$store.state.columns"
              :dataSource="$store.state.myCars"
              bordered
              :pagination="false"
              size="middle"
            ></a-table>
          </div>
        </a-tab-pane>
        <a-tab-pane tab="样本索引" key="5" class="ybindex" v-if="$store.state.ids!=0">
          <a-table
            :columns="ybsycolumns"
            :pagination="pagination"
            :dataSource="$store.state.ybsydata"
            bordered
          >
            <template slot="name" slot-scope="text">
              <a href="javascript:;">{{text}}</a>
            </template>
            <template slot="title" slot-scope="currentPageData">
              <a-button type="primary" @click="getnewindex">重新提取索引</a-button>
              <a-button type="primary" @click="delallindex">清除索引</a-button>
            </template>
          </a-table>
        </a-tab-pane>
        <!-- 数据导入 结束 -->
      </a-tabs>
    </div>

    <!-- 提取索引 start-->
    <transition>
      <div v-if="newindflg" class="getindex">
        <div class="bg">
          <div class="close" @click="close">
            <a-icon type="close" />
          </div>
          <div class="scroll">
            <div class="xl">
              <h3>请选择【型号】所在列：</h3>
              <div class="checkbox">
                <span class="ybindextab" v-for="(item,i) in ybindextab" :key="i">
                  <a-checkbox
                    v-if="item.children==undefined"
                    @change="xhChange"
                    :defaultChecked="isInxhCol(item.number)"
                    :value="item.number"
                  ></a-checkbox>
                  {{item.title}}
                  <span v-if="item.children!=undefined">：</span>
                  <a-checkbox
                    v-for="(items,i) in item.children"
                    :key="i"
                    :defaultChecked="isInxhCol(items.number)"
                    :value="items.number"
                    @change="xhChange"
                  >{{items.title}}</a-checkbox>
                  <br />
                </span>
                <span></span>
              </div>

              <!-- <div class="checkbox">
                <span class="ybindextab" v-for="(item,i) in ybindextab" :key="i">
                  <a-radio-group v-if="item.children==undefined" v-model="$store.state.xhColNum">
                    <a-radio :value="item.number"></a-radio>
                  </a-radio-group>
                  {{item.title}}
                  <span v-if="item.children!=undefined">：</span>
                  <span v-for="(items,i) in item.children" :key="i">
                    <a-radio-group v-model="$store.state.xhColNum">
                      <a-radio :value="items.number">{{items.title}}</a-radio>
                    </a-radio-group>
                  </span>
                  <br />
                </span>
                <span></span>
              </div>-->
            </div>
            <div class="xl">
              <h3>
                请选择【内径】所在列：
                <a-button type="primary" @click="resetnwj()">清空内/外/宽设置</a-button>
              </h3>

              <div class="checkbox">
                <span class="ybindextab" v-for="(item,i) in ybindextab" :key="i">
                  <a-radio-group v-if="item.children==undefined" v-model="$store.state.njradio">
                    <a-radio :value="item.number"></a-radio>
                  </a-radio-group>
                  {{item.title}}
                  <span v-if="item.children!=undefined">：</span>
                  <span v-for="(items,i) in item.children" :key="i">
                    <a-radio-group v-model="$store.state.njradio">
                      <a-radio :value="items.number">{{items.title}}</a-radio>
                    </a-radio-group>
                  </span>
                  <br />
                </span>
                <span></span>
              </div>
            </div>
            <div class="xl">
              <h3>请选择【外径】所在列：</h3>
              <div class="checkbox">
                <span class="ybindextab" v-for="(item,i) in ybindextab" :key="i">
                  <a-radio-group v-if="item.children==undefined" v-model="$store.state.wjradio">
                    <a-radio :value="item.number"></a-radio>
                  </a-radio-group>
                  {{item.title}}
                  <span v-if="item.children!=undefined">：</span>

                  <span v-for="(items,i) in item.children" :key="i">
                    <a-radio-group v-model="$store.state.wjradio">
                      <a-radio :value="items.number">{{items.title}}</a-radio>
                    </a-radio-group>
                  </span>
                  <br />
                </span>
                <span></span>
              </div>
            </div>
            <div class="xl">
              <h3>请选择【宽度】所在列：</h3>
              <div class="checkbox">
                <span class="ybindextab" v-for="(item,i) in ybindextab" :key="i">
                  <a-radio-group v-if="item.children==undefined" v-model="$store.state.kdradio">
                    <a-radio :value="item.number"></a-radio>
                  </a-radio-group>
                  {{item.title}}
                  <span v-if="item.children!=undefined">：</span>

                  <span v-for="(items,i) in item.children" :key="i">
                    <a-radio-group v-model="$store.state.kdradio">
                      <a-radio :value="items.number">{{items.title}}</a-radio>
                    </a-radio-group>
                  </span>
                  <br />
                </span>
                <span></span>
              </div>
            </div>
            <div class="xl" v-if="$store.state.zlColNumExist==1">
              <h3>请选择【重量】所在列：</h3>
              <div class="checkbox">
                <span class="ybindextab" v-for="(item,i) in ybindextab" :key="i">
                  <a-radio-group v-if="item.children==undefined" v-model="$store.state.zlradio">
                    <a-radio :value="item.number"></a-radio>
                  </a-radio-group>
                  {{item.title}}
                  <span v-if="item.children!=undefined">：</span>

                  <span v-for="(items,i) in item.children" :key="i">
                    <a-radio-group v-model="$store.state.zlradio">
                      <a-radio :value="items.number">{{items.title}}</a-radio>
                    </a-radio-group>
                  </span>
                  <br />
                </span>
                <span></span>
              </div>
            </div>
          </div>
          <div class="foot_sub">
            <a-button type="primary" @click="subtq">提取</a-button>
          </div>
        </div>
      </div>
    </transition>

    <!-- 提取索引 end-->
  </div>
</template>


<script src="./yblist.js">
</script>

<style lang='less' >
@import url("./yblist.less");
</style>
